import { ref, onMounted } from 'vue'

type ThemeType = 'default' | 'purple' | 'yellow'

export function useTheme() {
  const currentTheme = ref<ThemeType>('default')

  // 设置主题
  const setTheme = (theme: ThemeType) => {
    currentTheme.value = theme
    // 移除所有主题类
    document.documentElement.removeAttribute('data-theme')
    
    // 如果不是默认主题，则添加对应的主题属性
    if (theme !== 'default') {
      document.documentElement.setAttribute('data-theme', theme)
    }
  }

  // 初始化主题
  onMounted(() => {
    const savedTheme = localStorage.getItem('app-theme') as ThemeType || 'default'
    setTheme(savedTheme)
    currentTheme.value = savedTheme
  })

  // 切换到下一个主题
  const toggleTheme = () => {
    const themes: ThemeType[] = ['default', 'purple', 'yellow']
    const currentIndex = themes.indexOf(currentTheme.value)
    const nextIndex = (currentIndex + 1) % themes.length
    const nextTheme = themes[nextIndex]
    
    setTheme(nextTheme)
    localStorage.setItem('app-theme', nextTheme)
  }

  return {
    currentTheme,
    setTheme,
    toggleTheme
  }
}